import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import mutations from '@/store/mutations'
import actions from '@/store/actions'
import modules from '@/store/modules'

import stageConfig from '@/config/stage' // 引入舞台配置
import AppConfig from '@/config/index'
import VuexPersistence from 'vuex-persist'//引入vuex-persistedstate这个插件
Vue.use(Vuex)
/** 如果把整个store都放在index.js中是不合理的，所以需要拆分。比较合适的目录格式如下：
 store:.
 │  actions.js
 │  getters.js
 │  index.js
 │  mutations.js
 │  mutations_type.js   ##该项为存放mutaions方法常量的文件，按需要可加入
 │
 └─modules
 Astore.js
 */
/** vuex数据持久化解决方案
 why
 在vuex的时候刷新以后里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的，所以一刷新页面就会把state中的数据重置，这就涉及到vue数据持久化的问题。
 what？
 解决方案通过 vuex-persistedstate这个插件，来实现将数据存储到本地，从而实现刷新后state仍然还存在。
 how？
 npm install进行安装，然后import进行引入，new了一个插件的原型，最后要export导出
 */
const vuexLocal = new VuexPersistence({ //使用
  key: 'vuex', // 讲状态存储在存储中的键 默认vuex
  storage: window.localStorage, //可传localStorage sessionStorage localforage 或者自定义的存储对象，接口必须要有get和set
  reducer: state => ({ // 将状态减少到只需要保存的值，默认情况下，保存整个状态
    logined:state.logined,
    user:state.user,
    permissions:state.permissions,
    menus:state.menus
  })
})

export default new Vuex.Store({
  state: {
    logined: false, // 是否登录
    user: {}, // 当前用户
    permissions: [], // 每个用户的所有权限
    menus: [], // 每个用户的所有菜单
    sideBarLevel: AppConfig.sideBarLevel || 3,
    defaultRoute: AppConfig.defaultRoute || '/about',
    // 舞台配置
    stageConfig,
    // 当前页信息
    currentRoute: {
      config: null,
      treePath: [],
    },
    // 推送消息
    readedMessages: [],
    unreadMessages: [],
    //保存获取到当前启用的学期的名称
    currentSemester:'',
    //保存获取到的当前启用的学期的id
    currentSemesterId:''
  },
  //state成员操作
  mutations,
  //异步操作 context类似this
  actions,
  //模块化状态管理 当项目庞大，状态非常多时，可以采用模块化管理模式 Vuex 允许我们将 store 分割成模块（module）。
  // 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
  modules,
  //加工state成员给外界
  getters,
  plugins:[vuexLocal.plugin]//导出
})
